<script>
import axios from "axios";
import {getBaseUrl} from "@/js/common.js";

export default {
  name: "TextEditDrawer",
  data() {
    return {
      text: "",
      drawer: false
    }
  },
  props: {
    blog: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    open() {
      axios.get(getBaseUrl('blogHandle')+ `/blog/get/${this.blog.id}`).then(res => {
        this.text = res.data.data
      })
    },
    close() {
      this.text = ""
    },
    save(){
      axios.post(getBaseUrl('blogHandle')+ `/blog/update`, {
        id: this.blog.id,
        content: this.text
      }, {headers: {massToken: sessionStorage.getItem('massToken')}}).then(res => {
        if (res.data.code === 200){
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.drawer = false
        }
      })
    },
    handleUploadImage(event, insertImage, files){
      console.log(files)
      axios.post(getBaseUrl('fileCenter')+ `/gallery/uploadForBlog`,{
        blogId: this.blog.id,
        file: files[0]
      }, {headers: {'Content-Type': 'multipart/form-data', 'massToken': sessionStorage.getItem('massToken')}}).then(res => {
        insertImage({
          url: res.data,
          desc: files[0].name
        })
      })
    }
  }
}
</script>

<template>
  <div>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false" size="100%" @open="open" @close="close">
      <v-md-editor v-model="text" @save="save"  :disabled-menus="[]" @upload-image="handleUploadImage"></v-md-editor>
    </el-drawer>
  </div>
</template>

<style scoped>

</style>
